<template>
  <el-scrollbar>
    <div class="page-logs-wrap">
      <h3>前台配置</h3>
      <el-card style="height: calc(100% - 45px); margin-top: 20px; position: relative">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120">
          <el-form-item label="标题">
            <el-input
              v-model="ruleForm.title"
              placeholder="请输入"
              maxlength="20"
              style="width: 500px"
            ></el-input>
          </el-form-item>
          <el-form-item label="上传提示语">
            <el-input
              v-model="ruleForm.desc"
              type="textarea"
              autosize
              placeholder="请输入"
              maxlength="200"
              show-word-limit
              style="width: 500px"
            ></el-input>
          </el-form-item>
          <el-form-item label="供下载文件">
            <div class="template-list">
              <div
                class="template-item"
                v-for="(template, index) in ruleForm.templates"
                :key="index"
              >
                <el-input
                  v-model="template.name"
                  placeholder="请输入文件名称"
                  maxlength="10"
                  style="width: 200px"
                ></el-input>
                <div class="upload-box">
                  <el-button
                    v-if="!template.filename"
                    link
                    type="primary"
                    @click.prevent="uploadItemFile(template)"
                  >
                    上传文件
                  </el-button>
                  <div class="file-box" v-else>
                    <div class="file-name">
                      <el-icon><DocumentRemove></DocumentRemove> </el-icon>
                      <el-tooltip :content="template.filename" placement="top">
                        <span>{{ template.filename }}</span>
                      </el-tooltip>
                    </div>
                    <el-icon class="remove-btn" @click="removeRowFile(template)"
                      ><CircleCloseFilled></CircleCloseFilled>
                    </el-icon>
                  </div>
                </div>
                <el-button
                  type="danger"
                  link
                  :icon="Delete"
                  @click="removeTemplate(index)"
                ></el-button>
              </div>
              <el-button type="success" link @click="appendTemplate">+新增文件</el-button>
            </div>
          </el-form-item>
          <el-form-item label="外链地址">
            <div class="links-list">
              <div class="links-item" v-for="(link, index) in ruleForm.links" :key="index">
                <el-input
                  v-model="link.name"
                  placeholder="请输入外链名称"
                  maxlength="10"
                  style="width: 200px"
                ></el-input>
                <el-input
                  v-model="link.url"
                  placeholder="请输入外链地址"
                  style="width: 400px; margin: 0 10px"
                ></el-input>
                <el-checkbox v-model="link.open_in_this" style="margin-right: 20px"
                  >当前页打开</el-checkbox
                >
                <el-button type="danger" link :icon="Delete" @click="removeLink(index)"></el-button>
              </div>
              <el-button type="success" link @click="appendLink">+新增外链</el-button>
            </div>
          </el-form-item>
          <el-form-item label="上传文件限制">
            <el-input
              v-model="ruleForm.fileSizeLimit.min.value"
              type="number"
              :min="1"
              placeholder="最小值"
              style="width: 100px"
            ></el-input>
            <el-select v-model="ruleForm.fileSizeLimit.min.unit" style="width: 80px">
              <el-option label="KB" value="KB"></el-option>
              <el-option label="MB" value="MB"></el-option>
            </el-select>
            <span style="display: inline-block; margin: 0 10px">-</span>
            <el-input
              v-model="ruleForm.fileSizeLimit.max.value"
              type="number"
              :min="1"
              placeholder="最大值"
              style="width: 100px"
            ></el-input>
            <el-select v-model="ruleForm.fileSizeLimit.max.unit" style="width: 80px">
              <el-option label="KB" value="KB"></el-option>
              <el-option label="MB" value="MB"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="padding-left: 300px; margin-top: 50px">
          <el-button type="primary" @click="settingsSubmit" v-loading="isLoading">保存</el-button>
        </div>
      </el-card>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { DocumentRemove, CircleCloseFilled, Delete } from '@element-plus/icons-vue'
import { uploadFillToOssApi } from '@/api/files'
import { getConfigJsonApi, setConfigJsonApi } from '@/api/settings'
import { ElMessage } from 'element-plus'
import { useLoading } from '@/hooks/loading'
const { isLoading, startLoading, endLoading } = useLoading()

const rules = {}
const ruleForm = ref({
  templates: [{}],
  links: [{}],
  fileSizeLimit: {
    min: {
      unit: 'KB'
    },
    max: { unit: 'KB' }
  }
})

// 新增模板
const appendTemplate = () => {
  ruleForm.value.templates.push({})
}
// 删除模板
const removeTemplate = (index) => {
  ruleForm.value.templates.splice(index, 1)
}
// 新增外链
const appendLink = () => {
  ruleForm.value.links.push({})
}
// 删除外链
const removeLink = (index) => {
  ruleForm.value.links.splice(index, 1)
}

// 上传下载文件
const uploadItemFile = (item) => {
  const file_input = document.createElement('input')
  file_input.type = 'file'
  file_input.addEventListener('change', async (e) => {
    if (e.target.files.length) {
      const file = e.target.files[0]
      let formData = new FormData()
      formData.append('file', file, file.name)
      const res = await uploadFillToOssApi('template_files', formData)
      if (res && res.code === 200) {
        item.filename = res.msg[0].filename
        item.url = res.msg[0].url
      }
    }
  })
  file_input.click()
}
// 删除文件
const removeRowFile = (item) => {
  item.filename = ''
  item.file_url = ''
}

// 提交保存
const settingsSubmit = async () => {
  startLoading()
  const res = await setConfigJsonApi({
    configJson: JSON.stringify(ruleForm.value)
  })
  if (res && res.code === 200) {
    ElMessage.success('设置成功！')
  }
  endLoading()
}

onMounted(async () => {
  const res = await getConfigJsonApi()
  if (res && res.code === 200 && res.body.configJson) {
    ruleForm.value = JSON.parse(res.body.configJson)
    delete ruleForm.value.phoneNo
  }
})
</script>

<style scoped lang="less">
.page-logs-wrap {
  padding: 30px;
  box-sizing: border-box;
  height: 100%;
  h3 {
    margin: 0 0 20px;
  }
  .template-list {
    .template-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      &:last-of-type {
        margin: 0;
      }
      .upload-box {
        margin: 0 20px;
      }
      .file-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
        .file-name {
          display: flex;
          align-items: center;
          span {
            font-size: 12px;
            width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        .remove-btn {
          cursor: pointer;
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }
    }
  }
  .links-list {
    .links-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      &:last-of-type {
        margin: 0;
      }
    }
  }
}
</style>
